<!-- components/global-toast/global-toast.vue -->
<template>
        <view v-if="visible" class="toast-mask">
            <view class="toast-content" :class="[typeClass, animationClass]">
                <text class="toast-text">{{ message + '11111' }}</text>
            </view>
        </view>

</template>

<script setup lang="js">

import { ref, computed, getCurrentInstance, defineExpose } from 'vue'

const visible = ref(true)
const message = ref('')
const type = ref('success')
let timer = null

// 类型样式映射
const typeClass = computed(() => `toast-${type.value}`)

// 动画控制
const animationClass = ref('')

const show = (options = {}) => {
    console.log('哈哈哈哈 我打开了', visible.value,options)

    clearTimeout(timer)
    message.value = options.title || ''
    type.value = options.type || 'success'
    visible.value = true

    // 触发入场动画
    animationClass.value = 'toast-enter'
    setTimeout(() => animationClass.value = 'toast-enter-active', 50)

    // 自动关闭逻辑
    if (options.duration !== 0) {
        timer = setTimeout(() => hide(), options.duration || 2000)
    }
}

const hide = () => {
    animationClass.value = 'toast-leave-active'
    setTimeout(() => {
        visible.value = false
        animationClass.value = ''
    }, 300)
}

// 暴露方法给全局使用
defineExpose({ show, hide })
</script>

<style scoped>
.toast-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 9999 !important;
    background-color: #fa5151;
    width: 300px;
    height: 300px;
}

.toast-content {
    background: rgba(0, 0, 0, 0.7);
    padding: 20rpx 40rpx;
    border-radius: 8rpx;
    color: white;
    font-size: 28rpx;
    max-width: 70%;
    opacity: 0;
    transform: translateY(30rpx);
    transition: all 0.3s ease;

}

.toast-enter-active {
    opacity: 1;
    transform: translateY(0);
}

.toast-leave-active {
    opacity: 0;
    transform: translateY(-30rpx);
}

/* 类型扩展 */
.toast-success {
    background: #07c160;
}

.toast-error {
    background: #fa5151;
}

.toast-loading {
    background: rgba(0, 0, 0, 0.8);
}
</style>